import React, { useState } from 'react';
import '../../style/kuangjia.css';
import '../../style/main.css'

const RowSongList = ({ songs }) => {
  const itemsPerPage = 9; // 每页显示的项目数
  const [currentPage, setCurrentPage] = useState(0);
  const totalPages = Math.ceil(songs.length / itemsPerPage);

  const handleNextPage = () => {
    if (currentPage < totalPages - 1) {
      setCurrentPage(currentPage + 1);
    }
  };

  const handlePreviousPage = () => {
    if (currentPage > 0) {
      setCurrentPage(currentPage - 1);
    }
  };

  const currentItems = songs.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage);

  return (
    <div className="everybody_is_listening">
      <ul>
        <div className="hideicon4" onClick={handlePreviousPage} style={{ cursor: 'pointer' }}>
          <i className="ri-arrow-left-wide-line"></i>
        </div>
        <div className="hideicon4" onClick={handleNextPage} style={{ cursor: 'pointer' }}>
          <i className="ri-arrow-right-wide-line"></i>
        </div>
        {currentItems.map((song, index) => (
          <li key={index}>
            <div className="hideicon2">
              <i className="ri-play-fill"></i>
            </div>
            <div className="hideicon3">
              <i className="ri-heart-3-line"></i>
            </div>
            <div className="songImg">
              <img src={song.al.picUrl} alt={song.name} />
            </div>
            <div className="song_name">
              <span id="songname">{song.name}</span>
              <span id="singer">{song.ar.map(artist => artist.name).join(' / ')}</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RowSongList;
